<template>
  <Dialog
    :visible="importDialogVisible"
    @close="hangleCloseImportDialog"
    width="40%"
    top="40vh"
    title="批量导入"
  >
    <div class="myDialog-box">
      <div class="border"></div>
      <div class="content">
        <div class="download-box">
          <p class="tip">
            <span>1</span>
            请下载数据模板，填写信息
          </p>

          <p>
            <el-button type="primary" class="pointer" @click="downloadTemplate">下载模板</el-button>
          </p>
        </div>

        <div class="import-box">
          <p class="tip">
            <span>2</span>
            请上传填写好的文件
          </p>

          <Upload :isCover="isCover" @upload="handleUpload"></Upload>

          <div style="margin-top: 2px">
            <el-checkbox v-model="isCover" label="覆盖重复数据" size="large" />
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script lang="ts" setup>
import { getCurrentInstance, h, onMounted, reactive, ref } from "vue";

import Dialog from "@/components/common/Dialog.vue";
import Upload from "./Upload.vue";

const props = defineProps(["importDialogVisible"]);
const emits = defineEmits(["closeImportDialog", "upload"]);

const isCover = ref(true);

const hangleCloseImportDialog = () => {
  emits("closeImportDialog");
};

const handleUpload = () => {
  emits("upload");
};

const downloadTemplate = () => {
  const a = document.createElement("a");

  a.target = "_blank";
  a.href = "/template.xlsx";
  a.download = "模板.xlsx";

  a.click();

  hangleCloseImportDialog();
};
</script>

<style lang="less" scoped>
.myDialog-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  .border {
    position: absolute;
    top: 56px;
    width: 100%;
    height: 1px;
    background-color: #aaa;
  }
  .content {
    display: flex;
    width: 100%;
    font-size: 16px;
    margin-bottom: 20px;

    .download-box,
    .import-box {
      flex: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      p.tip {
        color: #aaa;
        & > span {
          display: inline-block;
          width: 18px;
          height: 18px;
          background-color: #aaa;
          color: #fff;
          border-radius: 50%;
        }
      }
    }

    .import-box {
      border-left: 1px solid #aaa;
      // padding-left: 50px;
      .import-btn {
        width: 100px;
        margin-top: 16px;
      }
    }

    .pointer {
      cursor: pointer;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
}
</style>
